<template>
    <div class="cusTop">
        <div :style="cusTopBg">
            <p>共累计推广<span style="font-size:32px;vertical-align:middle">&nbsp;&nbsp;{{data.allCustomer}}&nbsp;&nbsp;</span>位注册用户</p>
        </div>
        <ul class="cusUser">
            <li>
                <p>{{data.allEffective}}</p>
                <span>有效用户</span>
            </li>
            <li>
                <p>{{data.allInvalid}}</p>
                <span>待定用户</span>
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        name: "cusTop",
        components:{
            
        },
        data() {
            return {
                cusTopBg: {
                    backgroundImage: "url(" + require("@/images/neitui/beijing.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                    width:'100vw',
                    height:'42.7vw',
                    color:'#ffffff',
                    fontSize:'15px',
                    textAlign:'center',
                    paddingTop:'20px'
                },
            };
        },
        props:["data"],
        methods:{

        },
        created(){
        
        },
        mounted(){
        
        }
    }
</script>

<style scoped lang="scss">
    .cusUser{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 92vw;
        margin: 0 auto;
        li{
            width: 45%;
            text-align: center;
            p{
                font-size:24px;
                color:#5AB5FF;
            }
            span{
                font-size:16px;
                color:#333333;
            }
        }
    }
    
</style>
